<template>
  <div class="topimg">养殖环境监测</div>
  <div class="aqua-monitor-chart">
    <div ref="chart" class="chart-box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { monitorApi } from "@/api";

export default {
  name: "AquaMonitorChart",
  setup() {
    const chart = ref(null);

    onMounted(async () => {
      // 获取环境监测数据
      const res = await monitorApi.getEnvironmentDataList({});
      let xData = [],
        doData = [],
        phData = [],
        tempData = [];
      if (res.code === 0 && Array.isArray(res.data)) {
        xData = res.data.map((item) => item.samplingTime);
        doData = res.data.map((item) => item.dissolvedOxygen);
        phData = res.data.map((item) => item.phValue);
        tempData = res.data.map((item) => item.waterTemperature);
      }
      const myChart = echarts.init(chart.value);

      const option = {
        backgroundColor: "transparent",
        title: {
          show: false,
          text: "养殖环境监测",
          left: "center",
          top: 20,
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: "bold",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: (params) => {
            return `${params[0].axisValue}<br/>
            ${params[0].seriesName}: ${params[0].value}<br/>
            ${params[1].seriesName}: ${params[1].value}<br/>
            ${params[2].seriesName}: ${params[2].value}`;
          },
        },
        legend: {
          data: ["溶解氧", "pH", "水温"],
          right: 20,
          top: 60,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "10%",
          right: "5%",
          bottom: "10%",
          top: 120, // 增加上边距，避免标题和图表重合
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: "#4a8fe7",
            },
          },
          axisLabel: {
            color: "#fff",
            fontSize: 16, // 增大x轴字体大小
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 14,
          interval: 2,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4a8fe7",
            },
          },
          axisLabel: {
            color: "#fff",
            formatter: "{value}",
            fontSize: 16, // 增大y轴字体大小
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // 设置为虚线
              color: "rgba(74, 143, 231, 0.2)",
            },
          },
        },
        series: [
          {
            name: "溶解氧",
            type: "bar",
            barWidth: "25%",
            data: doData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#5470c6" },
                { offset: 1, color: "#3ba0ff" },
              ]),
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
          {
            name: "pH",
            type: "bar",
            barWidth: "25%",
            data: phData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#91cc75" },
                { offset: 1, color: "#4fba6f" },
              ]),
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
          {
            name: "水温",
            type: "bar",
            barWidth: "25%",
            data: tempData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#9a60b4" },
                { offset: 1, color: "#d64d8a" },
              ]),
            },
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", () => myChart.resize());
    });

    return {
      chart,
    };
  },
};
</script>

<style scoped>
.aqua-monitor-chart {
  width: 100%;
  height: 350px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
}

.chart-box {
  width: 530px;
  height: 380px;
  position: relative;
  bottom: 55px;
  right: 20px;
}

.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(@/assets/top.png);
  background-size: cover;
  text-align: center;
}
</style>